<template>
    <div style="background-color:#f5f5f5;">
      <div class="examineSuccess">
        <div style="width: 100%;background-color:#f5f5f5;">
          <div class="stepBox">
            <div class="titles">
              <p><span style="font-weight: bold;color: #333333;font-size: 20px;">刊登租房广告2</span>
                <span>(<span style="color: red">*</span>为必填项)</span>
              </p>
            </div>
            <!--步骤条-->
            <div class="steps">
              <el-steps :active="2" align-center finish-status="success" process-status="finish">
                <el-step title="填写资料" description=""></el-step>
                <el-step title="确认刊登方案" description=""></el-step>
                <el-step title="缴费" description=""></el-step>
                <el-step  title="完成刊登" description=""></el-step>
              </el-steps>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="successBox">
            <div class="programmeTitle">
              <h3 style="float: left">AMT过数</h3>
             <div class="HKbank">
               <span>中银香港(BOCHK) : <span style="color: red">01258610 3460 46</span></span>
               <el-button class="phoneBtn">过数账号发送至手机</el-button>
             </div>
            </div>
            <div class="programmeTable">
              <p style="margin-left: 30px;color: #666666;"><span style="color: red">*</span>过数成功后请返回提交过数信息，否则无法入账</p>
            </div>
            <div class="payOfflineSetp">
              <el-steps :active="1" finish-status="success"  simple style="margin-top: 20px">
                <el-step title="01过数(w网上银行. ATM)" ></el-step>
                <el-step title="02返回提交过数信息" ></el-step>
                <el-step title="03等待审核" ></el-step>
                <el-step title="04缴费完成" ></el-step>
              </el-steps>
            </div>
          </div>
          <div class="submitData">
            <h3 style="padding: 15px 0 0 15px;">提交过数信息</h3>
            <div style="margin:15px 0 0 50px;">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="转账方式">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="网上银行"></el-radio>
                    <el-radio label="ATM存款"></el-radio>
                    <el-radio label="柜台转账"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="转账方式">
                <el-input v-model="form.name" style="width: 300px"></el-input>
                <span>元</span>
              </el-form-item>
                <el-form-item label="转账方式">
                <el-input v-model="form.name" style="width: 300px"></el-input>
                <span style="color: #999999;">24小时格式</span>
              </el-form-item>
                <el-form-item label="ATM存款机编号" label-width="120px">
                  <el-input v-model="form.name" style="width: 260px"></el-input>

                </el-form-item>
              </el-form>
            </div>
          </div>
          <div style="width: 1200px;margin: 30px auto;text-align: left;">
            <el-button style="color: #ffffff;background-color:#ad2022;font-weight: bold;width: 250px;">提交过数资料</el-button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "payOffline",
      data() {
        return {
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          }
        }
      }
    }
</script>

<style scoped>
  .examineSuccess{
    width: 100%;
    height: 1200px;
    background-color:#f5f5f5;
    /*border: 1px solid #000;*/
  }
  .examineSuccess .stepBox{
    width: 1200px;
    /*background-color: #cccc;*/
    margin: 0 auto;
    height: 200px;
    background-color: #fff;
    border-top: 2px solid #ccc;

  }
  .examineSuccess .stepBox .titles{
    padding:30px 0 0 15px;
    /*border: 1px solid #000;*/
    text-align: left;
  }
  .steps{
    margin-top: 30px;
  }
  .examineSuccess .container{
    width: 100%;
    height: 500px;
    background-color: #f5f5f5;
    /*border: 1px solid #000;*/
  }
  .successBox{
    width: 1200px;
    height: 400px;
    background-color: #fff;
    margin: 30px auto;
    border: 1px solid #fff;
    text-align: left;
    line-height: 80px;
    font-weight: bold;

  }
  .programmeTitle{
    width: 98%;
    border-left: 5px solid #ad2022;
    /*border: 1px solid #000;*/
    border-radius: 5px 0 0 5px;
    height: 30px;
    margin:15px auto;
    text-align: left;
    padding-left: 15px;
    line-height: 30px;
  }
  .programmeTable{
    width: 96%;
    height: 80px;
    border: 1px solid #cccccc;
    margin: 30px auto;
    background-color: #f0f0f0;
  }
  .HKbank{
    float: right;
    width: 500px;
    font-weight: bold;
  }
  .HKbank .phoneBtn{
    margin-left: 30px;
    color:#ffffff;
    background-color:#ad2022;
  }
  .payOfflineSetp{
    width: 96%;
    height: 180px;
    /*border: 1px solid #000;*/
    margin: 0 auto;
  }
  .submitData{
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    background-color: #fff;
    text-align: left;

  }
</style>
